import React from 'react'
import { getHouseInfo, getImg } from "../../../../api/login";
import Slideshow from "./houseInfo/Slideshow";
import touXiang from '../../../../logo.svg'
import '../../../../styles/Home/houseInfo.scss'
import { Badge } from 'antd-mobile';
import Map from '../../../Issue/Map';
import Roomname from '../../routing/rentlist/home-rentlist/Roomname';

class HouseInfo extends React.Component {
  state = {
    resImg: [],
    resInfo: {},
    houseShow: false
  }

  componentDidMount() {
    let _this = this
    async function img() {
      let resImg = await Promise.resolve(getImg())
      let resHouse = await Promise.resolve(getHouseInfo())
      _this.setState({ resImg: resImg.data.data })
      _this.setState({ resInfo: resHouse.data, houseShow: true })
    }
    img()
  }
  render() {
    this.state.resInfo.houseDeploy && Array.from(this.state.resInfo.houseDeploy[0])
    console.log(this.state.resImg)
    return (
      <div id="houseInfo">
        <Slideshow data={this.state.resImg} />
        {this.state.houseShow &&
          <div className="houseWrap">
            <div className="houseInfo-td">
              <h3>{this.state.resInfo.houseName}</h3>
              <p className="title">
                <span>朝{this.state.resInfo.houseTitle.direction}</span>
                <span>|</span>
                <span>{this.state.resInfo.houseTitle.size}m</span>
                <span>|</span>
                <span>{this.state.resInfo.houseTitle.tier}</span>
                <span>{this.state.resInfo.houseTitle.elevator}</span>
              </p>
              <p className="price">
                <span>{this.state.resInfo.houseInfo.price}</span>/月
              </p>
            </div>
            <div className="user">
              <h4>发布者</h4>
              <div>
                <div>
                  <img src={touXiang} alt="" />
                  <span>翔少</span>
                  <Badge text="经纪人" style={{ marginLeft: 12, fontSize: '.1rem', padding: '.01rem .08rem', backgroundColor: '#FFC71C', borderRadius: 2 }} />
                </div>
                <div>
                  <i className="iconfont icondianhua" />
                  <span>电话</span>
                </div>
              </div>
            </div>
            <div className="houseInfo-bd">
              <h4>房源信息</h4>
              <div>
                <span>朝向&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseTitle.direction}</span>
                <span>户型&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.houseType}</span>
                <span>建面&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.face}</span>
                <span>楼层&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseTitle.tier}</span>
                <span>供暖&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.heating}</span>
                <span>电梯&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseTitle.elevator}</span>
                <span>年代&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.time}</span>
                <span>绿化&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.afforest}</span>
                <span>状态&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.status}</span>
                <span>签约&nbsp;&nbsp;&nbsp;{this.state.resInfo.houseInfo.signed}</span>
              </div>
            </div>
            <div className="deploy">
              <h4>房屋配置</h4>
              <div>

                {
                  this.state.resInfo.houseDeploy && (this.data = Array.from(this.state.resInfo.houseDeploy[0]).map(el =>
                    <div key={el.ico}>
                      <i className={el.ico} />
                      <span>{el.name}</span>
                    </div>))
                }
              </div>
            </div>
            <div className="map">
              <h4>位置信息</h4>
              <Map title={this.state.resInfo.houseName} />
            </div>
            <div className="houseList">
              <h4>位置信息</h4>
              <Roomname />
            </div>
          </div>
        }
      </div>
    )
  }
}
export default HouseInfo
